<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <title></title>
	    
	    <link href="../css/mui.min.css" rel="stylesheet"/>
	    <link href="../css/myapp.css" rel="stylesheet"/>
	</head>
	<body>
		<!--标题栏开始-->
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">产品名称</h1>
		</header>
		<!--标题栏结束-->
		
		<!--新加好友、群组开始-->
		<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 44px;">
			<li  class="mui-table-view-cell">
				<img id="infoID" class="mui-media-object mui-pull-left" src="../images/tx1.jpg">
				<div class="mui-media-body">
					<div class="mui-ellipsis center-name">远眺</div>
				</div>				
			</li>
		</ul>
		
		<ul class="mui-table-view" style="margin-top: 15px;">
			<li class="mui-table-view-cell">
				<a id="myNikeName">昵称<span class="mui-pull-right">远眺</span></a>
			</li>
			<li class="mui-table-view-cell">
				<a>个性签名<span class="mui-pull-right">。。。</span></a>
			</li>
		</ul>
		
		<ul id="loginOutID" class="mui-table-view" style="margin-top: 15px;">
			<li class="mui-table-view-cell">
				<a style="text-align: center;color: #0B8DCB;">退出</a>
			</li>
		</ul>
		
		<!--新加好友、群组结束-->
		
		
		
		
		<!--底部菜单栏开始-->
		<nav class="mui-bar mui-bar-tab mui-bar-nav-b">			
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-chatbubble"><span class="mui-badge">4</span></span>
			<span class="mui-tab-label">聊天</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"><span class="mui-badge remind-span"></span></span>
			<span class="mui-tab-label">通讯录</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">我</span>
		</a>
		</nav>
		<!--底部菜单栏结束-->
		<script src="../js/mui.min.js"></script>
		<script>
			window.onload=function(){
				mui.plusReady(function(){
					var self=plus.webview.currentWebview();
					mui("#infoID")[0].src=self.img;
				})
				/**
				 * 将图片以base64位字符串编码发送给后端
				 */
				convertImgToBase64('images/tx1.jpg', function(base64Img){ 
					console.log("tupian":base64Img); 
					//alert(base64Img);
				}) 
				function convertImgToBase64(url, callback, outputFormat){ 
					var canvas = document.createElement('CANVAS'); 
					var ctx = canvas.getContext('2d'); 
					var img = new Image; 
					img.crossOrigin = 'Anonymous'; 
					img.onload = function(){ 
					canvas.height = img.height; 
					canvas.width = img.width; 
					ctx.drawImage(img,0,0); 
					var dataURL = canvas.toDataURL(outputFormat); 
					callback.call(this, dataURL); 
					// Clean up 
					canvas = null; 
					}; 
					img.src = url; 
				} 
				document.getElementById("myNikeName").addEventListener('tap',function(){
					mui.openWindow(
						{
							url:'myInfo/myNickName.html',
							createNew:false//不创建相同webview的页面
						}
					)
				})
			}
			
			document.getElementById("infoID").addEventListener('tap',function(){
				mui.openWindow(
					{
						url:'/myInfo/my-head.html',
						createNew:false//不创建相同webview的页面
					}
				)
				
			});
			
			document.getElementsByClassName("loginOutID").addEventListener('tap',function(){
				alert("确定要退出？");
			})
			
		</script>
	</body>
</html>
